<!--
 * @Author: jyq
 * @Date: 2022-07-01 10:01:57
 * @LastEditTime: 2022-07-08 11:11:17
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\HomeView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
<div class="home">
  <div class="header">
    <div class="mySearch">
      <img src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png"/>
      <van-search class="search" shape="round" v-model="value" background="rgb(132,93,50)"  placeholder="请输入搜索关键词" />
    </div>
    <div>
    <swiper class="mySwiper" :slides-per-view="1" :space-between="50" :loop="true" :autoplay="{
    delay: 2000,
    disableOnInteraction: false,//手动翻页后，仍然自动播放
    }" :pagination="{
    clickable: true,
    }" :modules="modules">
    <swiper-slide>
      <img
        src="https://res.youpin.mi-img.com/youpinoper/42a569a0_ced6_4bcf_8833_a50a49fbf666.jpeg@base@tag=imgScale&h=320&w=750" />
    </swiper-slide>
    <swiper-slide>
      <img
        src="https://res.youpin.mi-img.com/youpinoper/23e9d50b_3e72_44fa_88f1_f391ce410381.png@base@tag=imgScale&h=320&w=750" />
    </swiper-slide>
    <swiper-slide>
      <img
        src="https://res.youpin.mi-img.com/youpinoper/8b6d166c_bbaa_47f6_b7a3_ec900a7f37f9.jpeg@base@tag=imgScale&h=320&w=750" />
    </swiper-slide>
    <swiper-slide>
      <img
        src="https://res.youpin.mi-img.com/youpinoper/8f6eabc4_ff0c_4c44_b3c6_20edd700ace5.jpeg@base@tag=imgScale&h=320&w=750" />
    </swiper-slide>
    <swiper-slide>
      <img
        src="https://res.youpin.mi-img.com/youpinoper/004547c4_6733_4030_9857_60906e7e9f06.jpeg@base@tag=imgScale&h=320&w=750" />
    </swiper-slide>
    </swiper>
    </div>
  </div>
  <div class="middle">
  <div class="list">
  <van-row class="myrow">
  <van-col 
  class="list_col" >
    <img src="https://img.youpin.mi-img.com/ferriswheel/p0kgmu4q3jo_22028918941626688453905.png@base@tag=imgScale&h=120&w=120"/>
    <span>上新精选</span>
  </van-col>
  <van-col 
  class="list_col" >
    <img src="https://img.youpin.mi-img.com/ferriswheel/jqdqm5q81n8_22028918941626687376754.png@base@tag=imgScale&h=120&w=120"/>
    <span>小米众筹</span>
  </van-col>
  <van-col 
  class="list_col" >
    <img src="https://img.youpin.mi-img.com/ferriswheel/aphcvmd2gvg_22028918941626688016327.png@base@tag=imgScale&h=120&w=120"/>
    <span>有品秒杀</span>
  </van-col>
  <van-col 
  class="list_col" >
    <img src="https://img.youpin.mi-img.com/ferriswheel/ea317c7c_ef18_4ee7_91ab_15fa62c72e19.png@base@tag=imgScale&h=120&w=120"/>
    <span>生活优选</span>
  </van-col>
  <van-col 
  class="list_col" >
    <img src="https://img.youpin.mi-img.com/sketch/79ca50c5_dc92_41da_bf5d_08ea24bb9652.png@base@tag=imgScale&h=120&w=120"/>
    <span>小米自营</span>
  </van-col>
</van-row>
  </div>
  <div class="middle_content">
  <img src="https://img.youpin.mi-img.com/jianyu/60a43004_4206_4c19_a996_27ab30fe7b5a.png@base@tag=imgScale&h=386&m=1&q=80&w=780"/>
  </div>
  </div>
  <div class="bottom">
  <div class="bottom_item">
    <div class="top">
      <div class="top_left">
         小米有品众筹
      </div>
       <div class="top_right">
         5款众筹中>
      </div>
    </div>
    <div class="bottom_content">
      <div class="left">
         <span>
          水上动力浮板
         </span>
         <br/>
         <br/>
         <span class="left_text">
          ￥799
         </span>
         <img src="https://img.youpin.mi-img.com/shop-fe/e5d73589_e67d_4ade_9637_f20b91487a5c.png@base@tag=imgScale&h=152&w=152"/>
         <van-progress class="myprogress"  color="#f2826a" percentage="34" />
      </div>
      <div class="right">
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/f2d381ff_89e8_49e3_8177_03af5bce956a.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>YUPP健身</span>
             <br/>
             <span class="right_text">￥1568</span>
         </div>
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/be8ccd48_6ecd_441b_be69_ef697ecc5437.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>智能电子护嗓</span>
             <br/>
             <span class="right_text">￥299</span>
         </div>
      </div>
    </div>
  </div>
  <div class="bottom_item">
   <div class="top">
      <div class="top_left">
        上选精品
      </div>
       <div class="top_right1">
        更多>
      </div>
    </div>
    <div class="bottom_content">
     
      <div class="right">
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/f2d381ff_89e8_49e3_8177_03af5bce956a.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>YUPP健身</span>
             <br/>
             <span class="right_text">￥1568</span>
         </div>
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/be8ccd48_6ecd_441b_be69_ef697ecc5437.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>智能电子护嗓</span>
             <br/>
             <span class="right_text">￥299</span>
         </div>
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/f2d381ff_89e8_49e3_8177_03af5bce956a.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>YUPP健身</span>
             <br/>
             <span class="right_text">￥1568</span>
         </div>
         <div class="right_item">
             <img src="https://img.youpin.mi-img.com/shop-fe/be8ccd48_6ecd_441b_be69_ef697ecc5437.png@base@tag=imgScale&h=150&w=150"/>
             <br/>
             <span>智能电子护嗓</span>
             <br/>
             <span class="right_text">￥299</span>
         </div>
      </div>
    </div>
  </div>
  </div>
  </div>
</template>

<script setup>
// vue 3.2
import { ref } from "vue";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
const modules = [Navigation, Pagination, Scrollbar, A11y, Autoplay]
</script>


<style lang="less" scoped>
.home{
  background-color: #f4f4f4;
}
.mySwiper{
  img{
    width:375px;
  }
}
.mySearch{
  background-color: rgb(132,93,50);
  height: 60px;
  img{
    width: 37px;
    float: left;
    margin-top: 16px;
    margin-left: 5px;
  }
  .search{
    padding-top: 12px;
  }
}
.middle{
  .list{
   .myrow{
    width: 375px;
     .list_col{
      width: 69px;
      margin-left: 3px;
    }
   }
    img{
      width: 62px;
      height: 62px;
    }
    span{
      margin-left: 5px;
      font-size: 12px;
    }
  }
  .middle_content{
    img{
      margin-top: 5px;
      width: 370px;
      margin-right: 1px;
    }
    
  }

}
.bottom{
  width: 100%;
  height: 300px;
  .bottom_item{
    width: 360px;
    height: 135px;
    margin-left: 6px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #fff;
    
    .top{
      display: inline-block;
      .top_left{
        float: left;
        font-size: 18px;
        color: #222222;
        font-weight: 500;
      }
      .top_right{
        float: right;
        font-size: 12px;
        margin-left: 180px;
        margin-top: 5px;
        color: rgba(0,0,0,0.4);
      }
      .top_right1{
       float: right;
        font-size: 12px;
        margin-left: 230px;
        margin-top: 5px;
        color: rgba(0,0,0,0.4);
      }
    }
    .bottom_content{
      .left{
        float: left;
        width: 168px;
        height: 89px;
        background-color: rgb(255,250,242);
        span{
          font-size: 15px;
          margin-left: 5px;
        }
        img{
          float: right;
          width: 75px;
          margin-top: -41px;
        }
        .left_text{
          font-size: 16px;
          font-weight: bold;
          margin-right: 27px;
          line-height: 10px;
          color: #D08D35;
        }
        .myprogress{
          margin-top: 23px;
        }
      }
      .right{
        .right_item{
          float: left;
          margin-top: -6px;
          margin-left: 16px;
          img{
            width: 70px;
          }
          span{
            margin-left: 6px;
            font-size: 12px;
          }
          .right_text{
             color: #D08D35;
             font-size: 12px;
             font-weight: bold;
             margin-left: 10px;
          }
        }
      }
    }
  }
}
:deep(.swiper-pagination) {
  text-align: right;
  left: -12px;
  bottom: 16px;
}

:deep(.swiper-pagination-bullet) {
  width: 17px;
  height: 3px;
  background-color: white;
  border-radius: 0;
  opacity: 1;
}

:deep(.swiper-pagination-bullet-active) {
  height: 17px;
}
</style>
